<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>DEMO弹窗数据管理</title>
<meta name="Description" content="表格操作" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../../res/weadmin_2.26/static/css/font.css">
<link rel="stylesheet" href="../../../res/weadmin_2.26/static/css/weadmin.css">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
	      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
	      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	    <![endif]-->
</head>

<body>
	<div class="weadmin-nav">
		<span class="layui-breadcrumb" style="visibility: visible;" > 
			<a href="javascript:void(0)">首页</a> <span lay-separator="">/</span> 
			<a href="javascript:void(0)">DEMO模块</a> <span lay-separator="">/</span> 
			<a> <cite>DEMO数据列表</cite></a>
		</span> <a class="layui-btn layui-btn-sm" style="line-height: 1.6em; margin-top: 3px; float: right" href="javascript:location.replace(location.href);" title="刷新"> <i class="layui-icon" style="line-height: 30px">&#x1002;</i></a>
	</div>

	<div class="weadmin-body">
		<div class="layui-row">
			<form id="qform" class="layui-form layui-col-md12 we-search" lay-filter="qformFilter">
				<div class="layui-input-inline">
					<input name="timeStart" class="layui-input" placeholder="开始日" />
				</div>
				<div class="layui-input-inline">
					<input name="timeEnd" class="layui-input" placeholder="结束日" />
				</div>

				<div class="layui-input-inline">
					<input name="condition" class="layui-input" placeholder="输入框" lay-verify="required|nikename|min6to12"   />
				</div>
				
				<div class="layui-input-inline">
					选择:
				</div>				
				<div class="layui-input-inline">
					<select name="chooseCdt" lay-verify="required" >
						<option value=""> 全部 </option>
						<option value="1"> 选项1</option>
						<option value="2"> 选项2</option>
						<option value="3"> 选项3</option>
					</select>
				</div>
				
				<button id="lqform_searchBtn" class="layui-btn" lay-submit="" lay-filter="qformFilter">
					<i class="layui-icon">&#xe615;</i>
				</button>
				
			</form>
		</div>

		<div class="weadmin-block demoTable">
			<button id="refCurPage" class="layui-btn" > 刷新当前页 </button>
			<button id="toadd_btn" class="layui-btn layui-btn-normal">添加</button>
			<button id="layformWin_btn" class="layui-btn layui-btn-normal">layform窗口</button>
			<button id="layformVueWin_btn" onclick="openWinLayformVue(123)"  class="layui-btn layui-btn-normal" >打开窗口(layformVue)</button>
		</div>

		<!-- 数据表格 -->
		<table class="layui-hide" id="dataList"></table>
		
		<!-- 工具列模板 Start TODO  -->
		<script type="text/html" id="operateColTplt">
			<a title="编辑" onclick="toEditInf({{d.baseInf.baseId}})" href="javascript:;">
				<span class="layui-btn layui-btn-normal layui-btn-xs">编辑</span>
			</a>
			<a title="查看" onclick="toDtlInf({{d.baseInf.baseId}})" href="javascript:;">
				<span class="layui-btn layui-btn-normal layui-btn-xs">详情</span>
			</a>
		</script>

	</div>
</body>

<script type="text/javascript" src="//cdn.staticfile.org/js-cookie/2.2.0/js.cookie.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.staticfile.org/jquery/1.12.4/jquery.js" charset="utf-8"></script>
<script type="text/javascript" src="//cdn.staticfile.org/layer/2.3/layer.js" charset="utf-8"></script>
<!--
-->
<script type="text/javascript" src="../../../res/js/layui_jq_util.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../res/weadmin_2.26/lib/layui/layui.js" charset="utf-8"></script>

<script type="text/javascript" src="../../../sysmgr/cfg/env_cfg.js" charset="utf-8"></script>
<script type="text/javascript" src="../../../sysmgr/tplt_dft/adm_mgr/js/adm_power_util.js" charset="utf-8"></script>

<script type="text/javascript" charset="utf-8">
	
	// layui工具类
	var layuiJqUtil = new LayuiJqUtil();

	// 权限工具 TODO
	var admPowerUtil = new AdmPowerUtil();  
	
	/**
	 * 跳转添加窗口
	 */
	var toAddInf = function(){
		var openTitle = "添加窗口";
		var openUrl =  "./demo_datalist_win_add.html";
		layuiJqUtil.layerOpenChooseWin({
			 url:openUrl
			,title:openTitle
			,width:800
			,height:400
			,fedback:function(rspData){
				// 窗口响应数据处理
				// 列表刷新
				layer.msg("收到弹窗的信息:" + JSON.stringify(rspData));
				// $("#lqform_searchBtn").click();
			}
		});
	}
	
	/**
	 * 详情窗口
	 * @param {Object} dataId
	 */
	var toDtlInf = function(dataId ){
		var openTitle = "详情窗口";
		var openUrl =  "./demo_datalist_win_add.html?id=" + dataId ;
		layuiJqUtil.layerOpenChooseWin({
			 url:openUrl
			,title:openTitle
			,width:800
			,height:600
			,fedback:function(rspData){
				// 窗口响应数据处理
				// 列表刷新
				layer.msg("收到弹窗的信息:" + JSON.stringify(rspData));
				// $("#lqform_searchBtn").click();
			}
		});
	}

	/**
	 * 编辑窗口
	 * @param {Object} dataId
	 */
	var toEditInf = function(dataId ){
		var openTitle = "编辑窗口";
		var openUrl =  "./demo_datalist_win_add.html?id=" + dataId ;
		layuiJqUtil.layerOpenChooseWin({
			 url:openUrl
			,title:openTitle
			,width:800
			,height:600
			,fedback:function(rspData){
				// 窗口响应数据处理
				// 列表刷新
				layer.msg("收到弹窗的信息:" + JSON.stringify(rspData));
				// $("#lqform_searchBtn").click();
			}
		});
	}
	
	var openWinLayformVue = function(id){
		var openTitle = "LayformVue";
		var openUrl =  "./demo_datalist_win_layform_vue.html?id=" + id ;
		layuiJqUtil.layerOpenChooseWin({
			 url:openUrl
			,title:openTitle
			,width:800
			,height:600
			,fedback:function(rspData){
				// 窗口响应数据处理
				// 列表刷新
				layer.msg("收到弹窗的信息:" + JSON.stringify(rspData));
				// $("#lqform_searchBtn").click();
			}
		});
	}
	

// layui 初始化 
	layui.config({
	  base: '../../../res/weadmin_2.26/static/js/'
	  ,version: '101100'
	});

	// 
	layui.use(['jquery','form','laydate','table'], function() {
		var $ = layui.jquery ; 
		var form = layui.form ; 
		var laydate = layui.laydate ;
		var table = layui.table ; 
	  
	  // 初始化查询表单
	  var qform_jqObj = $("#qform");
	  var qform_formUrl = "./js/demo_datalist.json"; // 表单查询地址,TODO ,值为空时第一次不查询  
	  
	  // 表单插件初始化
	  var qform_timeStart = laydate.render({
			elem: "#qform [name=timeStart]" ,
			format : "yyyy/MM/dd HH:mm:ss"
		});

		var qform_timeEnd = laydate.render({
			elem: "#qform [name=timeEnd]" ,
			format : "yyyy/MM/dd HH:mm:ss" ,
			min: "2018-06-01 00:00:00",
			max: "2018-06-09 23:59:59"
		});
		
		console.debug(qform_timeStart);
		console.debug(qform_timeEnd);
	  
	  // 获取表单数据
	  var qform_getFormData = function(){
	  	// 获取表单信息
	  	var formData = layuiJqUtil.jqGetFormDataObj(qform_jqObj);
	  	// 补充登录信息  TODO 
	  	admPowerUtil.doFillLoginToken(formData); 
	  	return formData ;
	  }

	  // 表单数据验证:
	  // 自定义规则
	  form.verify({
        nikename: function(value){
          if(value.length < 5){
            return '至少得5个字符啊';
          }
       }
       ,min6to12: [/(.+){6,12}$/, '必须6到12位']
   	});

	  // 初始化查询表格
	  // 初始化表格(含分页)
		var dataListTable_obj = table.render({
			id:"dataListTable_obj_id", 
			elem: "#dataList", 
			url:qform_formUrl,
			where : qform_getFormData(),
			// cellMinWidth: 80,
			
			// 数据字段匹配 TODO 
			cols: [
				[{
					field: 'baseId',title: 'ID',sort: true , templet : function(data){ console.debug(data); return data.baseInf.baseId ; }
				}
				,{
					field: 'baseProp1',title: '基本属性1', templet : function(data){ return data.baseInf.baseProp1 ; }
				}
				,{
					field: 'baseProp2',title: '基本属性2', templet : function(data){ return data.baseInf.baseProp2 ; }
				}
				,{
					field: 'extProp1',title: '扩展属性1', templet : function(data){ return data.extraInf.extProp1 ; }
				}
				,{
					field: 'operate',title: '操作',toolbar: '#operateColTplt',unresize: true
				}]
			],
			done: function(res, curr, count){
				// 加载后处理
				layer.closeAll("loading"); // 关闭所有的loading
				// 响应处理.
				var rspCode = res.errorCode ; 
				if(rspCode  && rspCode> 0 ){
					// 权限处理
					admPowerUtil.doHandleErrorByCode(rspCode);
				}
				console.log("查询后回调处理");
			},
			loading :true,
			event: true,
			page: {
				limits : [2,10,20,50]
			},
			request:{
				 pageName : "page" // 请求页数名称 , 默认 page  , TODO  
				,limitName : "pageSize" // 请求每页数据量名称 , 默认 limit , TODO 
			},
			response:{
				statusName: 'errorCode' //数据状态的字段名称，默认：code , TODO 
				,statusCode: "0" //成功的状态码，默认：0 , 	TODO 
				,countName : "dataCount" // 统计字段名称, 默认  count , TODO 
				,dataName : "datarows" // 数据字段名称,默认 data , TODO 
			}
		});

		// 表单提交(查询)处理
	  form.on("submit(qformFilter)",function(filterData){
	  	
	  	layer.msg("表单提交了:"+JSON.stringify(filterData));

	  	// 查询表单数据
			var formData = qform_getFormData();
			
			// qform_formUrl = "./js/demo_datalist.json"; // 表单查询地址,TODO 值为空时第一次不查询  
			// dataListTable_obj.config.url= qform_formUrl ;

			// 表格信息初始化.
			dataListTable_obj.config.where = formData ; // 查询条件 
			// 分页条件 
			dataListTable_obj.config.page.curr = 1 ; // 重轩第一页
	
			layer.load(1); // 打开loading
			dataListTable_obj.reload(dataListTable_obj.config);
			
			console.debug("表格对象");
			console.debug(dataListTable_obj);
			
	  	return false ; // 不刷新页面
	  });

	  // 刷新当前页 
		var refreeshCurrPage = function (){
			layer.load(1); // 打开loading
			dataListTable_obj.reload();
			// $(".layui-laypage-btn").click();
		}
		
		
		// 事件绑定:
		$("#refCurPage").on("click",refreeshCurrPage);
		$("#toadd_btn").on("click",toAddInf);
	
		
		// 表单重新渲染
		// form.render();

	});
	
	
	
	$("#layformWin_btn").on("click",function(){
		var openTitle = "添加窗口";
		var openUrl =  "./demo_datalist_win_layform.html";
		layuiJqUtil.layerOpenChooseWin({
			 url:openUrl
			,title:openTitle
			,width:800
			,height:400
			,fedback:function(rspData){
				// 窗口响应数据处理
				// 列表刷新
				layer.msg("收到弹窗的信息:" + JSON.stringify(rspData));
				// $("#lqform_searchBtn").click();
			}
		});
	});
	
	

</script>

</html>